// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
@mixin tooltip-variant($tooltip-color,$tooltip-bg){
  // Wrapper for the tooltip content
  &+.tooltip{
    .tooltip-inner {
      max-width: $tooltip-max-width;
      padding: 3px 8px;
      color: $tooltip-color;
      text-align: center;
      background-color: $tooltip-bg;
      border-radius: $border-radius-base;
    }

    // Arrows
    .tooltip-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    &.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
      border-top-color: $tooltip-bg;
    }
    &.top-left .tooltip-arrow {
      bottom: 0;
      right: $tooltip-arrow-width;
      margin-bottom: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
      border-top-color: $tooltip-bg;
    }
    &.top-right .tooltip-arrow {
      bottom: 0;
      left: $tooltip-arrow-width;
      margin-bottom: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
      border-top-color: $tooltip-bg;
    }
    &.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
      border-right-color: $tooltip-bg;
    }
    &.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
      border-left-color: $tooltip-bg;
    }
    &.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -$tooltip-arrow-width;
      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
      border-bottom-color: $tooltip-bg;
    }
    &.bottom-left .tooltip-arrow {
      top: 0;
      right: $tooltip-arrow-width;
      margin-top: -$tooltip-arrow-width;
      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
      border-bottom-color: $tooltip-bg;
    }
    &.bottom-right .tooltip-arrow {
      top: 0;
      left: $tooltip-arrow-width;
      margin-top: -$tooltip-arrow-width;
      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
      border-bottom-color: $tooltip-bg;
    }
  }
}
